﻿<DemoPageSectionComponent Id="Editors-MaskedInput-TextMasks" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <label for="teTextMasks" class="demo-text cw-320 mb-1">
            Telephone
        </label>
        <DxMaskedInput @bind-Value="@Telephone"
                       SizeMode="Params.SizeMode"
                       CssClass="cw-320"
                       Mask="(999)000-0000"
                       InputId="teTextMasks" >
            <DxTextMaskProperties Placeholder="Placeholder" SaveLiteral="SaveLiterals" />
        </DxMaskedInput>
        <p class="demo-text cw-320 mt-3">
            The entered value is: <b>@Telephone</b>
        </p>
    </ChildContentWithParameters>

    <OptionsContent>
        <OptionComboBox CssClass="ow-100"
                        Label="Placeholder:"
                        Data="PredefinedPlaceholders"
                        @bind-Value="Placeholder" />
        <OptionCheckBox Label="Save Literals"
                        @bind-Checked="@SaveLiterals" />
    </OptionsContent>

    @code {
        IEnumerable<char> PredefinedPlaceholders = new List<char>() { '_', '#' };
        string Telephone { get; set; } = "5625595830";
        char Placeholder { get; set; } = '_';
        bool SaveLiterals { get; set; } = true;
    }
</DemoPageSectionComponent>
